import React, { useEffect, useState, useRef, useMemo, useLayoutEffect } from 'react'
import styles from './index.module.less'
import { isArray } from 'lodash'

const statusColor = new Map()
statusColor.set('active', '#1890ff')
statusColor.set('success', '#52c41a')
statusColor.set('exception', '#ff4d4f')
statusColor.set('normal', '#1890ff')

const Progress = (props) => {
	const {
		strokeWidth,
		// percent,
		bgColor,
		progressColor,
		showInfo,
		status,
		textInside,
		passNum,
		successText,
		unPassText,
		showText,
		type,
	} = props
	const boxRef = useRef()
	const lineRef = useRef()
	const circleRef = useRef()
	const dashboardRef = useRef()

	const [percent, setPercent] = useState(10)

	const btnClick = (type) => {
		type === 'add' && setPercent(() => (20 + percent > 100 ? 100 : 20 + percent))
		type === 'reduce' && setPercent(() => (percent - 20 < 0 ? 0 : percent - 20))
	}

	useLayoutEffect(() => {
		if (strokeWidth) {
			boxRef.current.style.width = `${strokeWidth}px`
			circleRef.current.style.width = `${strokeWidth}px`
			circleRef.current.style.height = `${strokeWidth}px`
			dashboardRef.current.style.width = `${strokeWidth}px`
			dashboardRef.current.style.height = `${strokeWidth}px`
		}
		if (bgColor) {
			boxRef.current.style.background = bgColor
		}
		if (status) {
			lineRef.current.style.background = statusColor.get(status)
		}
		if (progressColor) {
			lineRef.current.style.background = isArray(progressColor)
				? `linear-gradient(to right,${progressColor[0]} 0%, ${progressColor[1]} 100%)`
				: progressColor
		}
		if (textInside) {
			lineRef.current.style.height = 'auto'
			lineRef.current.style.padding = '4px 6px'
		}
	}, [])

	useEffect(() => {
		const targetBox = boxRef.current
		let tarWidth = targetBox.style.width
		tarWidth = tarWidth.replace('px', '')
		tarWidth = Number(tarWidth)

		const progressWidth = (percent / 100) * tarWidth
		lineRef.current.style.width = `${progressWidth}px`
	}, [percent])

	const r = 50
	const path = `M ${strokeWidth / 2},${strokeWidth / 2} m 0,-${r} a ${r},${r} 0 1 1 0,${2 * r} a ${r},${r} 0 1 1 0,-${
		2 * r
	}`
	const path2 = `M ${strokeWidth / 2},${strokeWidth / 2} m 0,${r} a ${r},${r} 0 1 1 0,-${2 * r} a ${r},${r} 0 1 1 0,${
		2 * r
	}`
	const C = 2 * Math.PI * r
	const tC = (percent / 100) * C
	const styleFirst = {
		strokeDasharray: `${C}px, ${C}px`,
		strokeDashoffset: '0px',
		transition: `
            stroke-dashoffset 0.3s ease 0s, 
            stroke-dasharray 0.3s ease 0s, 
            stroke 0.3s ease 0s,
            strokeWidth 0.06s ease 0.3s
         `,
	}

	const styleSecond = {
		strokeDasharray: `${tC}px, ${C}px`,
		strokeDashoffset: '0px',
		transition: `
            stroke-dashoffset 0.3s ease 0s, 
            stroke-dasharray 0.3s ease 0s, 
            stroke 0.3s ease 0s,
            strokeWidth 0.06s ease 0.3s
         `,
	}
	return (
		<div className={styles.progressContainer}>
			<button onClick={() => btnClick('add')}> + </button>
			<button onClick={() => btnClick('reduce')}> - </button>
			<div className={styles.lineProgress}>
				<div className={styles.progressBox} ref={boxRef}>
					<div className={styles.progress} ref={lineRef}>
						{showText && textInside && <span className={styles.num}>{percent}%</span>}
					</div>
				</div>
				{showText && showInfo && !textInside && (
					<span className={styles.num}>
						{percent === 100 ? successText : percent < passNum ? unPassText : `${percent}%`}
					</span>
				)}
			</div>
			<div className={styles.circleProgress} ref={circleRef}>
				<svg height={strokeWidth} width={strokeWidth}>
					<path d={path} strokeLinecap="round" stroke="#f5f5f5" strokeWidth="4.8" fillOpacity="0" style={styleFirst} />
					<path
						d={path}
						stroke="red"
						strokeLinecap="round"
						strokeWidth="4.8"
						opacity="1"
						fillOpacity="0"
						style={styleSecond}
					/>
				</svg>
				<div className={styles.circleProgressInner}>
					{showText && showInfo && !textInside && (
						<span className={styles.num}>
							{percent === 100 ? successText : percent < passNum ? unPassText : `${percent}%`}
						</span>
					)}
				</div>
			</div>

			<div className={styles.dashboard} ref={dashboardRef}>
				<svg height={strokeWidth} width={strokeWidth}>
					<path
						d={path2}
						stroke="#e5e9f2"
						strokeWidth="4.8"
						fill="none"
						strokeLinecap="round"
						style={{
							strokeDasharray: `${(3 / 4) * C}px, ${C}px`,
							strokeDashoffset: `-${(1 / 8) * C}px`,
						}}
					/>
					<path
						d={path2}
						stroke="red"
						strokeWidth="4.8"
						fill="none"
						strokeLinecap="round"
						style={{
							strokeDasharray: `${(((percent / 100) * 3) / 4) * C}px, ${C}px`,
							strokeDashoffset: `-${(1 / 8) * C}px`,
							transition: `
                                stroke-dashoffset 0.3s ease 0s, 
                                stroke-dasharray 0.3s ease 0s, 
                                stroke 0.3s ease 0s,
                                strokeWidth 0.06s ease 0.3s
                             `,
						}}
					/>
				</svg>

				<div className={styles.dashboardInner}>
					{showText && showInfo && !textInside && (
						<span className={styles.num}>
							{percent === 100 ? successText : percent < passNum ? unPassText : `${percent}%`}
						</span>
					)}
				</div>
			</div>
		</div>
	)
}

Progress.defaultProps = {
	strokeWidth: 150,
	percent: 80,
	bgColor: '#f5f5f5',
	progressColor: ['deepskyblue', 'blue'],
	showInfo: true,
	status: 'normal',
	textInside: false,
	passNum: 60,
	successText: '完成',
	unPassText: '不及格',
	showText: true,
	type: 'line',
}

export default Progress
